<template>
	<view class="">
		<e-popup :show="show" round="40rpx">
			<view class="pay-popup bg-white">
				<view class="header e-rela">
					<view class="text-center fw-600 e-font-32">
						{{ $t('classify.选择支付方式') }}
					</view>
					<image class="close-btn img-36 e-abso" :src="$staticPath('classify/close.png')" @tap="emits('close',false)"></image>
				</view>
				<pay-list ref="payListRef" :showRadio="false" :storeType="storeType" :hiddenStrategys="hiddenStrategys" :foldList="false" :isDefault="isDefault" :isTrace="isTrace" :isSystem="isSystem" :isMobilePay="isMobilePay" :proIds="proIds" @pay="handlePay"></pay-list>
			</view>
		</e-popup>
		<password-popup ref="passwordPopupRef" :payMoney="payMoney"  :show="passwordShow" @close="passwordShow = false" @confirm="passwordPay"></password-popup>
	</view>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'pay-popup'
});
</script>

<script setup lang="ts">
import { ref, watch } from 'vue';
import type { PaymodeItem } from '@/common/request/api';
import type { PayListInstance, PasswordPopupInstance } from '@/typings/components';
import type { PayType } from '@/env';

const props = defineProps({
	show: Boolean,
	// 是否可以使用余额支付
	isDefault: {
		type: String,
		default: 'Y'
	},
	// 是否为视频号带货
	isTrace: {
		type: Boolean,
		default: false
	},
	// 是否可以使用系统支付方式
	isSystem: {
		type: Boolean,
		default: true
	},
	// 是否只使用微信、支付宝，paypal等手机支付
	isMobilePay: {
		type: Boolean,
		default: false
	},
	// 支付弹窗的支付金额
	payMoney: [String, Number],
	// 商品id集，逗号分割
	proIds: String,
	// 不展示的支付方式，列表形式，为支付方式的strategy合集
	hiddenStrategys:Array,
	storeType:{
		type: [String,Number],
		default: 1
	},
});

const emits = defineEmits(['pay', 'update:show','close']);

const passwordShow = ref(false);

let payType = '';
let payName = '';
let payisDefault = '';
let payId = -1;

const handlePay = (_payId: number, _payType: PayType, _payName: string, isDefault: string) => {
	payType = _payType;
	payisDefault = isDefault;
	payName = _payName;
	emits('update:show', false);
	if (_payType === 'SYS') {
		payId = _payId;
		passwordShow.value = true;
		return;
	}
	emits('pay', _payId, null, _payType, _payName, isDefault);
};
const payListRef = ref<PayListInstance>();
const payModeConfirm = (item: PaymodeItem) => {
	payListRef.value?.payModeConfirm?.(item);
};
const passwordPopupRef = ref<PasswordPopupInstance>();
// 输入完时密码调用
const passwordPay = (password: string) => {
	passwordPopupRef.value?.reset();
	passwordShow.value = false;
	emits('pay', payId, password, payType, payName, payisDefault);
};

const getPayMode = () => {
	return payListRef.value?.payMode;
};

watch(
	() => props.show,
	(val) => {
		val && payListRef.value?.getPaymodeList();
	}
);

defineExpose({
	getPayMode,
	payModeConfirm
});
</script>

<style scoped lang="scss">
.pay-popup {
	padding-bottom: 40rpx;
	.header {
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 2rpx solid #e2e2e2;

		.close-btn {
			top: 26rpx;
			right: 32rpx;
		}
	}
}
</style>
